import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import {
    Row, Col, Card, Form, Input,
    Select, Icon, Button, Dropdown, Menu,
    InputNumber, DatePicker, Modal, message,
    Badge, Divider, Tag, Table, Popconfirm
} from 'antd';
import StandardTable from '../../components/StandardTable';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import DescriptionList from '../../components/DescriptionList';
import { routerRedux ,Link} from 'dva/router';
import styles from './PostMaintenance.less';

const FormItem = Form.Item;
const { Option } = Select;
const { Description } = DescriptionList;
/*
  组织架构维护-岗位维护界面
*/
const getValue = obj => Object.keys(obj).map(key => obj[key]).join(',');
const statusMap = ['default', 'processing', 'success', 'error'];
const branch = [branchSon, branchSon, '已上线', '异常'];
const branchSon = ['支行1', '支行2'];


const data = [];
for (let i = 0; i < 4; i++) {
    data.push({
        key: i.toString(),
        postname: `岗位 ${i}`,
        describe: `这是岗位描述，哈哈哈 ${i}`,
        role: `角色 ${i}`,
    });
}

const EditableCell = ({ editable, value, onChange }) => (
    <div>
        {editable
            ? <Input style={{ margin: '-5px 0' }} value={value} onChange={e => onChange(e.target.value)} />
            : value
        }
    </div>
);
const children = [];
for (let i = 2; i < 6; i++) {
    children.push(<Option key={i.toString(6) + i}>{i.toString(6) + i}</Option>);
}

function handleChange(value) {
    console.log(`selected ${value}`);
}

@connect(({ rule, loading }) => ({
    rule,
    loading: loading.models.rule,
}))
@Form.create()
export default class PostMaintenance extends PureComponent {
    state = {
        modalVisible: false,
        expandForm: false,
        selectedRows: [],
        formValues: {},
    };
    constructor(props) {
        super(props);
        this.columns1 = [{
            title: '岗位名称',
            dataIndex: 'postname',
            key: 'postname',   
            width: '33%',
            render: (text, record) => this.renderColumns(text, record, 'postname'),
        }, {
            title: '描述',
            dataIndex: 'describe',
            key: 'describe',   
            width: '33%',
            render: (text, record) => this.renderColumns(text, record, 'describe'),
        }, {
            title: '角色',
            dataIndex: 'role',
            key: 'role',   
            width: '33%',
            render: (text, record) => {

                { this.renderColumns(text, record, 'role') }
                return (
                    <span>
                        {text}
                        <Link to="/#/system/role-list" style={{ float: 'right' }}>
                            <Icon type="search" />
                        </Link>
                    </span>);
            },
        }];
        this.state = { data };
        this.cacheData = data.map(item => ({ ...item }));
    }
    renderColumns(text, record, column) {
        return (
            <EditableCell
                editable={record.editable}
                value={text}
                onChange={value => this.handleChange(value, record.key, column)}
            />
        );
    }
    handleChange(value, key, column) {
        const newData = [...this.state.data];
        const target = newData.filter(item => key === item.key)[0];
        if (target) {
            target[column] = value;
            this.setState({ data: newData });
        }
    }

    handleModalVisible = (flag) => {
        this.setState({
            modalVisible: !!flag,
        });
    }

    newMember = () => {
        const newData = this.state.data.map(item => ({ ...item }));
        newData.push({
            key: `NEW_TEMP_ID_${this.index}`,
            workId: '',
            name: '',
            department: '',
            editable: true,
            isNew: true,
        });
        this.index += 1;
        this.setState({ data: newData });
    }

    handleSearchDate = () => {
        message.warning('点击生效');
    }

    newSelectRole = () => {
        this.props.dispatch(routerRedux.push('/system/role-list'));
    }

    handleAdd = (fields) => {
        this.props.dispatch({
            type: 'rule/add',
            payload: {
                description: fields.desc,
            },
        });

        message.success('添加成功');
        this.setState({
            modalVisible: false,
        });
    }

    render() {
        const { rule: { data1 }, loading } = this.props;
        const { selectedRows, modalVisible } = this.state;
        

        const parentMethods = {
            handleAdd: this.handleAdd,
            handleModalVisible: this.handleModalVisible,
        };

        return (
            <PageHeaderLayout
                title="岗位维护"
                logo={<img alt="" src="https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png" />}
            >
                <Card
                    title="硚口支行" 
                    bordered={false} >
                    <DescriptionList style={{ marginBottom: 32 }} col={1}>
                        <Description >
                            <Row>
                                <Description term="岗位名称"><Input placeholder="请输入" /></Description>
                            </Row>
                        </Description>
                    </DescriptionList>
                    <DescriptionList style={{ marginBottom: 32 }} col={1}>
                        <Description >
                            <Row>
                                <Description term="岗位描述"><Input placeholder="请输入" /></Description>
                            </Row>
                        </Description>
                    </DescriptionList>
                    <div className={styles.tableListOperator}>
                            <Button
                                style={{ width: '10%', marginTop: 16, marginBottom: 8 }}
                                type="primary"
                                onClick={this.newSelectRole}
                                // icon="plus"
                                >
                                提交
                            </Button>
                        </div>
                </Card>
            </PageHeaderLayout>
        );
    }
}
